Par DocuGenerate Automatiser la génération de documents peut considérablement améliorer votre productivité, en particulier lors de la gestion de plusieurs modèles et jeux de données. Bien que l’application web de DocuGenerate offre une solution complète, vous pourriez vouloir intégrer des capacités de génération de documents directement dans votre propre application Bubble.
C’est pourquoi nous avons créé un plugin Bubble qui vous permet d’exploiter la puissance de l’API DocuGenerate directement dans vos applications Bubble. Dans ce tutoriel, nous allons voir comment nous avons construit une version simplifiée de DocuGenerate avec Bubble et notre plugin - aucun code requis !
Pour mieux comprendre ce que nous allons construire, vous pouvez consulter la démo Bubble. L’animation ci-dessous montre un parcours utilisateur complet à travers l’application, de la création du modèle à la génération et au téléchargement du document.
Le parcours utilisateur typique suit ces étapes :
Ce flux reproduit les fonctionnalités principales de l’application web de DocuGenerate, mais entièrement implémentées dans Bubble. L’intégration fluide entre la plateforme de développement visuel de Bubble et l’API de DocuGenerate crée une solution de génération de documents à la fois puissante et accessible.
Avant de commencer à construire notre application, vous devrez préparer votre environnement de développement. La plateforme visuelle de Bubble simplifie ce processus, mais il y a quelques étapes essentielles à suivre :
Le plugin Bubble de DocuGenerate fournit un ensemble complet d’appels API reflétant les fonctionnalités de notre API REST. Ils sont classés en deux catégories :
Ils permettent de récupérer des informations depuis votre compte DocuGenerate :
Elles permettent de créer, modifier ou supprimer des ressources dans votre compte DocuGenerate :
Comprendre ces appels API est essentiel, car ils constituent l’ossature de notre application de démonstration. Tout au long de ce tutoriel, nous utiliserons la plupart de ces appels pour créer un flux de génération de documents entièrement fonctionnel.
Avant d’examiner chaque page en détail, configurons la structure de navigation qui reliera toutes les parties de notre application. Un système de navigation cohérent est essentiel pour offrir une expérience utilisateur fluide à travers l’application. Nous avons créé une barre de navigation simple qui apparaît en haut de chaque page et qui comprend :
Cette structure de navigation reprend l’approche utilisée dans l’application web DocuGenerate elle-même, offrant une expérience familière aux utilisateurs qui ont déjà utilisé notre plateforme principale. Cette mise en page familière aide les utilisateurs à comprendre intuitivement comment naviguer dans l’application sans instructions supplémentaires.
La page Dashboard sert de hub central de notre application, offrant aux utilisateurs une vue d’ensemble immédiate de tous leurs modèles disponibles. C’est le premier écran que voient les utilisateurs à l’ouverture de l’application, elle est donc conçue pour être à la fois informative et intuitive, permettant un accès rapide aux fonctionnalités les plus importantes.
Comme pour l’interface web de DocuGenerate, nous avons organisé les modèles dans une grille visuellement attrayante qui présente les aperçus des modèles avec leurs noms. Cette approche visuelle permet aux utilisateurs d’identifier rapidement le modèle recherché, même en gérant des dizaines de modèles différents.
L’élément clé ici est le RepeatingGroup, qui se remplit automatiquement avec tous les modèles de votre compte DocuGenerate. Cette approche dynamique garantit que le tableau de bord affiche toujours la liste la plus à jour des modèles, sans nécessiter de mise à jour manuelle.
Chaque modèle de la grille est cliquable et navigue vers une vue détaillée de ce modèle spécifique. Ce schéma d’interaction crée un flux naturel à travers l’application, guidant les utilisateurs de la vue d’ensemble vers des informations plus détaillées en un seul clic.
Le tableau de bord s’intègre également parfaitement à notre barre de navigation, qui inclut le bouton « New Template » pour un accès rapide à la création de modèle. Cela garantit que les utilisateurs peuvent facilement démarrer le processus de génération de documents depuis cet emplacement central.
C’est sur cette page que les utilisateurs commencent le processus de génération de documents en téléversant un document Word qui servira de modèle. Cette étape essentielle constitue la base de toute génération de documents ultérieure, car le modèle téléversé contient la structure, le formatage et les balises de fusion qui seront utilisés lors de la génération des documents.
Nous avons conçu cette page pour qu’elle soit simple et ciblée, éliminant les distractions inutiles et guidant les utilisateurs à travers le processus de création de modèle. L’interface communique clairement ce qui est requis (un document Word et un nom) et fournit un retour immédiat lorsque le modèle est créé avec succès.
file via l’option de lien dynamiquename 
Ce formulaire simplifié gère tout ce qui est nécessaire pour créer un modèle dans DocuGenerate. Le composant FileUploader offre un moyen natif pour les utilisateurs de sélectionner des fichiers depuis leur appareil, avec prise en charge du glisser-déposer et un retour visuel clair. Cela rend le processus intuitif même pour les utilisateurs non techniques qui ne sont pas familiers avec l’automatisation de documents.
Une fois le modèle créé, la navigation automatique vers la page de détail du modèle crée une transition fluide vers l’étape suivante du flux. Ce parcours utilisateur réfléchi évite aux utilisateurs de naviguer manuellement entre les pages, réduisant les frictions et améliorant l’expérience globale.
La page de détail du modèle sert de hub central pour gérer un modèle spécifique et tous les documents qui en sont générés. Cette page réunit les informations essentielles du modèle avec des fonctionnalités de gestion de documents, offrant une vue complète de l’utilisation et de la production de chaque modèle.
Contrairement aux pages plus simples que nous avons créées jusqu’à présent, la page de détail du modèle intègre plusieurs sources de données et éléments interactifs pour créer une interface plus complexe et fonctionnelle. Nous avons soigneusement organisé ces éléments pour conserver de la clarté malgré cette complexité accrue, garantissant que les utilisateurs peuvent facilement trouver et utiliser les fonctionnalités dont ils ont besoin.
id défini sur le template_id de l’URL. 
template_iddocument_uri pour le téléchargement 
L’aspect le plus puissant de cette page est la façon dont elle utilise la Data Source de l’élément Group pour rendre toutes les données du modèle disponibles aux éléments enfants. Ce schéma, parfois appelé « héritage de données » dans Bubble, garantit que tous les éléments de la page se mettent automatiquement à jour lorsqu’un modèle différent est sélectionné. Cette approche simplifie la logique de la page et améliore les performances en réduisant les appels API redondants.
La liste des documents offre une vue chronologique de tous les documents générés à partir de ce modèle, les documents les plus récents apparaissant en haut. Chaque élément de document inclut un lien de téléchargement direct, permettant aux utilisateurs d’accéder rapidement à leurs fichiers générés sans naviguer vers d’autres pages.
Le bouton « + » bien visible constitue un appel à l’action clair, guidant les utilisateurs vers le processus de génération de documents. Lorsqu’il est cliqué, ce bouton navigue vers la page de génération de document, en transmettant l’ID du modèle pour conserver le contexte. Cette conception réfléchie de l’interaction garantit que les utilisateurs peuvent facilement passer de la consultation des détails du modèle à la génération de nouveaux documents.
C’est ici que la véritable puissance de la génération de documents prend tout son sens, permettant aux utilisateurs de connecter leurs données à des modèles pour produire des documents personnalisés. Nous avons conçu cette page pour qu’elle soit puissante tout en restant accessible, équilibrant des fonctionnalités avancées avec une interface claire.
Cette page conserve une cohérence visuelle avec la page de détail du modèle, affichant les mêmes informations de modèle en haut pour fournir du contexte. Cela aide les utilisateurs à confirmer qu’ils travaillent avec le bon modèle avant de poursuivre la génération de document, évitant ainsi d’éventuelles erreurs ou confusions.
template_id de l’URL 
Le champ MultiLine Input est particulièrement important car il offre un moyen flexible pour les utilisateurs de saisir leurs données JSON. Cette approche prend en charge à la fois des structures de données simples pour des documents basiques et des objets ou tableaux imbriqués complexes pour des scénarios de génération plus sophistiqués. Pour les utilisateurs avancés, cette capacité d’édition JSON directe offre un contrôle précis sur les données fusionnées dans leurs modèles.
La liste déroulante du format de sortie illustre l’un des principaux avantages de DocuGenerate : la possibilité de générer des documents dans plusieurs formats à partir d’un seul modèle. Les utilisateurs peuvent choisir le format le mieux adapté à leurs besoins, qu’il s’agisse d’un PDF pour une diffusion officielle, d’un DOCX pour une modification ultérieure, ou d’un autre format pour des cas d’usage spécifiques.
Une fois le document généré, la page revient automatiquement à la page de détail du modèle, où le document nouvellement créé apparaît en haut de la liste. Ce retour immédiat confirme que la génération a réussi et offre un accès rapide au document généré.
Bien que notre application de démonstration fournisse les fonctionnalités essentielles pour la génération de documents, il existe de nombreuses façons de l’améliorer pour créer une application encore plus puissante et conviviale :
Ces améliorations transformeraient notre application de démonstration d’une simple preuve de concept en une solution complète de génération de documents, adaptée à des besoins métier spécifiques. L’avantage d’utiliser la plateforme de développement visuel de Bubble est que ces fonctionnalités peuvent être ajoutées progressivement, permettant à l’application d’évoluer avec les besoins des utilisateurs.
Créer une application de génération de documents avec Bubble et le plugin DocuGenerate démontre la puissance du développement no-code combiné à des API spécialisées. L’application de démonstration que nous avons construite sert à la fois de preuve de concept et de point de départ pour vos propres projets d’automatisation de documents. En exploitant la plateforme de développement visuel de Bubble et les capacités de génération de documents de DocuGenerate, vous pouvez créer des solutions personnalisées adaptées à vos besoins spécifiques sans écrire une seule ligne de code.
Cette approche est particulièrement précieuse pour les entreprises sans équipes de développement dédiées ou celles qui souhaitent prototyper et itérer rapidement sur des flux de génération de documents. La nature visuelle de Bubble la rend accessible aux analystes métier, spécialistes des opérations et autres membres d’équipe non techniques, leur permettant de créer des solutions qui répondent directement à leurs défis d’automatisation de documents.
Que vous construisiez des outils internes pour votre équipe ou des applications destinées aux clients, cette approche offre un moyen rapide et flexible de mettre en œuvre des fonctionnalités de génération de documents. La combinaison de l’interface intuitive de Bubble et de la puissante API de DocuGenerate crée une synergie qui rend l’automatisation de documents sophistiquée accessible aux organisations de toutes tailles.
Saisissez votre e-mail pour recevoir la dernière newsletter de DocuGenerate
Découvrez comment créer des factures PDF hybrides Factur-X conformes avec des fichiers XML intégrés. Explorez les exigences, les normes et les approches de mise en œuvre pour ZUGFeRD, Factur-X et d'autres formats de facturation électronique utilisés en Europe et dans le monde.
Transformez votre pratique juridique grâce à la génération automatisée de pleading papers. Découvrez comment créer un flux de travail efficace avec Make, Typeform et DocuGenerate qui convertit les données de prise en charge client en pleading papers correctement formatés et conformes aux standards professionnels.
DocuGenerate est fier d'être lauréat du prix Top Performer dans la catégorie PDF Generators de SourceForge, le plus grand site web de comparaison et d'avis logiciels au monde. Nous sommes honorés d'être valorisés par nos clients et d'être reconnus par ce prix.